.due-date-button {
    background: $color-gray200;
    cursor: pointer;
    &.date-set {
        color: $color-white;
    }
    &.closed,
    &.text-button.closed:hover {
        background: $color-gray200;
    }
    &.due-set,
    &.text-button.due-set:hover {
        background: $color-link-primary;
    }
    &.due-soon,
    &.text-button.due-soon:hover {
        background: $color-solid-red;
    }
    &.past-due,
    &.text-button.past-due:hover {
        background: $color-solid-red;
    }

    &.editable {
        cursor: pointer;
    }
    &.text-button {
        color: $color-white;
        margin: 0;
        padding: .5rem;
        &.not-set:hover {
            color: $color-white;
        }
        &.not-set {
            color: $color-gray200;
        }
    }
}

.related-tasks .task-name {
    .due-date-icon {
        top: .1rem;
    }
}

.issues-table .subject .due-date-icon {
    top: .25rem;
}

.card-statistics .due-date-icon {
    margin: .1rem 0 0;
    svg {
        height: .9rem;
        width: .9rem;
    }
}

.due-date-button-wrapper {
    display: flex;
    position: relative;
}

.date-picker-container {
    overflow: visible;
}

.date-picker-popover {
    background: $white;
    border: 1px solid $gray;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 2rem;
    width: auto;
    z-index: $first-layer;
}

.date-picker-popover-footer {
    padding: .2rem .5rem;
    text-align: right;
    svg {
        fill: $gray;
        height: 1rem;
        width: 1rem;
    }
    a:hover svg {
        fill: $red;
    }
}
